<template>
  <el-page-header @back="router.go(-1)" title="返回">
    <template #content>
      <span>{{courseForm.id ? '编辑':'添加'}}课程</span>
    </template>
  </el-page-header>
 


  <div class="content">
    <el-form ref="courseFormRef" :model="courseForm" :rules="courseFormRule" :inline="false" label-width="160px">

      <el-form-item label="名称" prop="name">
        <el-input v-model="courseForm.name" placeholder="请输入名称" maxlength="20"/>
      </el-form-item>

      
      <el-form-item label="描述" prop="name">
        <el-input v-model="courseForm.description" placeholder="请输入描述" maxlength="20"/>
      </el-form-item>
 
      <el-form-item label="面向人群" prop="name">
        <el-input v-model="courseForm.serviceCrowd" placeholder="请输入面向人群" maxlength="20"/>
      </el-form-item>

      
      <el-form-item label="技术要求" prop="name">
        <el-input v-model="courseForm.preparedSkill" placeholder="请输入技术要求" maxlength="20"/>
      </el-form-item>
 
  
      <el-form-item label="目标" prop="price">
        <el-input v-model="courseForm.goal" placeholder="请输入目标" maxlength="12"/>
      </el-form-item>
 

      <el-form-item label="课程图片:" prop="image"> 
        <el-upload
            class="avatar-uploader"
            action="http://localhost/file/upload"
            :headers="{token:token}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="courseForm.photo" :src="courseForm.photo" style="width:178px;height:178px;" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="courseForm.description" type="textarea" />
      </el-form-item>

      <el-form-item>
        <el-button @click="handleSave">保存</el-button>
        <el-button type="primary" @click="handleCancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

import {saveCourse,findById} from "@/api/course"
  

import { ElMessage } from 'element-plus'

const router = useRouter();
const route = useRoute();
  

let courseFormRef = reactive(null);
let courseForm = reactive({
  id:null,
  name: null,
  description:null,
  photo:null,
  serviceCrowd:null,
  preparedSkill:null,
  goal:null,
});

let courseFormRule = reactive({
  name: [
    {
      required: true,
      trigger: 'blur'
    }
  ]
})

const token = sessionStorage.getItem("token");
     

if(route.query.courseId){
  //根据id查找
  findById(route.query.courseId).then((resp)=>{
    let course = resp.data;
    courseForm.id = course.id;
    courseForm.name = course.name;
    courseForm.description = course.description;
    courseForm.photo = course.photo;
    courseForm.serviceCrowd = course.serviceCrowd;
    courseForm.preparedSkill = course.preparedSkill;
    courseForm.goal = course.goal; 
  }).catch((error)=>{

  })
}
 

//图片上传相关方法
const handleAvatarSuccess=(resp, file)=>{
  courseForm.photo = resp.data;
}

const beforeAvatarUpload=(file)=>{
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
}


let handleSave = () => {
  //判断是否校验通过
  courseFormRef.validate((valid) => {
    if (valid) { 
      saveCourse(courseForm.id,courseForm).then((resp) => {
        //提示并且返回列表
        router.push({path: '/course/list'});
      });
    }
  });
}
 
 
</script>

<style scoped>
.content {
  margin-top: 40px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
